<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div id="jrwm" ref="el" class="jiaruwomen">
    <transition name="animate-zoomIn">
      <div v-show="show" class="content">
        <a class="join-button" target="_blank" href="https://www.zhipin.com/gongsi/e8a4619dc2f0faa61XJ-09q9GA~~.html">
          <span class="join-text">加入我们</span>
          <span class="welcome-text">WELCOME TO JOIN US →</span>
        </a>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.jiaruwomen {
  min-height: 440px;
  padding-top: 50px;
  padding-bottom: 80px;

  .content {
    width: 1200px;
    margin: 0 auto;
    height: 440px;
    padding: 95px;
    background-size: 100% 100%;
    background-image: url('https://public-oss-file.zmaxfilm.com/website-compress/join-24.png');

    .join-button {
      width: 460px;
      height: 64px;
      margin-top: 90px;
      display: flex;
      flex-direction: column;
      font-family: PangMenZhengDaoBiaoTiTi;

      &:hover {
        color: #961f92;
      }

      .join-text {
        font-size: 30px;
        font-style: italic;
      }

      .welcome-text {
        font-size: 20px;
        font-family: Source Han Sans SC;
        font-style: italic;
        line-height: 48px;

      }
    }
  }
}
</style>
